<template>
    <div class="box">
        <img class="top-box" src="../../public/img/微信图片aaa_02.png">
        <div class="bottom-box">
            <div class="login" @click="toDiscover">手机号登录</div>
            <div class="service">

                <van-checkbox v-model="checked" checked-color="#bebebe" icon-size="12px">
                    我已阅读并同意
                    <span>《服务条款》</span>
                    <span>《隐私条款》</span>
                    <span>《中国联通认证服务协议》</span>
                </van-checkbox>



            </div>
        </div>
    </div>
    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '170px' }">
        <p class="text">服务协议和隐私政策等指引</p>
        <p class="text1">进入下一步前请先阅读并同意网易云音乐的 <span>《服务条款》</span>
            <span>《隐私条款》</span>
            <span>《中国联通认证服务协议》</span>
        </p>
        <p class="pop-bottom"> 
            <div class="dis" @click="disAgree">不同意</div>
            <div class="rig" @click="Agree">同意并继续</div>
        </p>
        
    </van-popup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const checked = ref(false)
const showBottom = ref(false)
const $router=useRouter()

const toDiscover = () => {
    if (checked.value === false) {
        showBottom.value = true

    }
    else{
        $router.push('/phone')
        
    }


}
const Agree=()=>{
    checked.value = true
    showBottom.value=false


}
const disAgree=()=>{
   
    showBottom.value=false


}


</script>
<style lang="scss" scoped>
.box {
    height: 15.32rem;
    width: 100%;

    >.top-box {
        width: 100%;
        height: 6.04rem;
    }

    >.bottom-box {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-top: 2.5rem;

        >.login {
            height: .8rem;
            width: 5.58rem;
            margin: 0 auto;
            background-color: #ea4d44;
            color: #fff;
            text-align: center;
            line-height: .8rem;
            border-radius: .4rem;



        }

        >.service {

            font-size: .24rem;
            width: 4.52rem;
            height: .5rem;
            text-align: center;
            margin: .2rem auto;

            span {

                color: #6484b0;
            }
        }

    }

}

.text {


    margin-top: .56rem;
    text-align: center;
    font-size: .32rem;

}
.text1{
    box-sizing: border-box;
    font-size: .24rem;
    text-align: center;
    padding-left: .7rem;
    padding-right: 1.26rem;
    margin-top: .24rem;
    span{ color: #6484b0;}
}
.pop-bottom{
    display: flex;
    width: 6.14rem;
    height: .84rem;
    justify-content: space-between;
    text-align: center;
    margin-left: .7rem;
    margin-top: .44rem;
    div{
        width: 3rem;
        border: .02rem solid #ebebeb;
        text-align: center;
        line-height: .84rem;
        border-radius: .4rem;
    }
    >.dis{
        color: #222223;
    }
    >.rig{
        color: #ffffff;
        background-color: #ea4d44;
    }
}
</style>